<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>HTML | 学习笔记</title><meta name="author" content="心结说给影子听"><meta name="copyright" content="心结说给影子听"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="HTML 基本标签引用图片应相对引用   &#x2F;  代表下一级 ..&#x2F;  代表上一级 12345678910111213charst&#x3D;&quot;utf-8&quot;  --一定要写不然会乱码&lt;h1&gt;&lt;&#x2F;h1&gt;   标题标签1-6&lt;p&gt;&lt;&#x2F;p&gt;  段落标签，间距较大&lt;br&#x2F;&gt; 分行间距较小&lt;strong&gt;&lt;&#x2F;strong&amp;">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML">
<meta property="og:url" content="https://gitee.com/keduoli123/zhaopubook/2023/02/17/HTML/index.html">
<meta property="og:site_name" content="学习笔记">
<meta property="og:description" content="HTML 基本标签引用图片应相对引用   &#x2F;  代表下一级 ..&#x2F;  代表上一级 12345678910111213charst&#x3D;&quot;utf-8&quot;  --一定要写不然会乱码&lt;h1&gt;&lt;&#x2F;h1&gt;   标题标签1-6&lt;p&gt;&lt;&#x2F;p&gt;  段落标签，间距较大&lt;br&#x2F;&gt; 分行间距较小&lt;strong&gt;&lt;&#x2F;strong&amp;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/keduoli123/zhaopubook/img/title5.jpg">
<meta property="article:published_time" content="2023-02-17T00:19:11.410Z">
<meta property="article:modified_time" content="2023-03-17T01:29:13.089Z">
<meta property="article:author" content="心结说给影子听">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/keduoli123/zhaopubook/img/title5.jpg"><link rel="shortcut icon" href="/zhaopubook/img/favicon.png"><link rel="canonical" href="https://gitee.com/keduoli123/zhaopubook/2023/02/17/HTML/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/zhaopubook/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/zhaopubook/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'HTML',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-03-17 09:29:13'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/zhaopubook/atom.xml" title="学习笔记" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/zhaopubook/img/head.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data is-center"><div class="data-item"><a href="/zhaopubook/archives/"><div class="headline">文章</div><div class="length-num">13</div></a></div><div class="data-item"><a href="/zhaopubook/tags/"><div class="headline">标签</div><div class="length-num">0</div></a></div><div class="data-item"><a href="/zhaopubook/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/zhaopubook/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/zhaopubook/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/zhaopubook/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/zhaopubook/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/zhaopubook/shuoshuo/"><i class="fa-fw fa fa-comments-o"></i><span> 分享</span></a></li><li><a class="site-page child" href="/zhaopubook/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/zhaopubook/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/zhaopubook/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/zhaopubook/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/zhaopubook/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/zhaopubook/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/zhaopubook/img/title5.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/zhaopubook/">学习笔记</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/zhaopubook/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/zhaopubook/categories/"><i class="fa-fw fa fa-archive"></i><span> 分类</span></a></li><li><a class="site-page child" href="/zhaopubook/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/zhaopubook/archives/"><i class="fa-fw fa fa-folder-open"></i><span> 归档</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 生活</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/zhaopubook/shuoshuo/"><i class="fa-fw fa fa-comments-o"></i><span> 分享</span></a></li><li><a class="site-page child" href="/zhaopubook/photos/"><i class="fa-fw fa fa-camera-retro"></i><span> 相册</span></a></li><li><a class="site-page child" href="/zhaopubook/music/"><i class="fa-fw fa fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/zhaopubook/movies/"><i class="fa-fw fas fa-video"></i><span> 影视</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/zhaopubook/links/"><i class="fa-fw fa fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/zhaopubook/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/zhaopubook/about/"><i class="fa-fw fas fa-heart"></i><span> 关于笔者</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">HTML</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-02-17T00:19:11.410Z" title="发表于 2023-02-17 08:19:11">2023-02-17</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-03-17T01:29:13.089Z" title="更新于 2023-03-17 09:29:13">2023-03-17</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="HTML"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><p>HTML</p>
<h2 id="基本标签"><a href="#基本标签" class="headerlink" title="基本标签"></a>基本标签</h2><p>引用图片应相对引用  </p>
<p>/  代表下一级</p>
<p>../  代表上一级</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">charst=&quot;utf-8&quot;  --一定要写不然会乱码</span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span>   标题标签1-6</span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span>  段落标签，间距较大</span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>/&gt;</span> 分行间距较小</span><br><span class="line"><span class="tag">&lt;<span class="name">strong</span>&gt;</span><span class="tag">&lt;/<span class="name">strong</span>&gt;</span>  <span class="tag">&lt;<span class="name">b</span>&gt;</span><span class="tag">&lt;/<span class="name">b</span>&gt;</span>加粗标签</span><br><span class="line"><span class="tag">&lt;<span class="name">em</span>&gt;</span><span class="tag">&lt;/<span class="name">em</span>&gt;</span>  <span class="tag">&lt;<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>倾斜效果</span><br><span class="line"><span class="tag">&lt;<span class="name">u</span>&gt;</span><span class="tag">&lt;/<span class="name">u</span>&gt;</span> 下划线</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>  盒子标签一个占一行 <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span> 小盒子</span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;&quot;</span> <span class="attr">title</span>=<span class="string">&quot;&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;&quot;</span>&gt;</span> src图片路径 alt图片加载不出来显示得文字  title鼠标放上去显示的文字</span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;2.jpg&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;郭玺牛逼&quot;</span> <span class="attr">title</span>=<span class="string">&quot;郭玺牛逼&quot;</span> <span class="attr">width</span>=<span class="string">&quot;500&quot;</span> <span class="attr">height</span>=<span class="string">&quot;300&quot;</span> <span class="attr">border</span>=<span class="string">&quot;30&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">target</span>=<span class="string">&quot;bank&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span>  超链接标签 href为必须属性 打开网页方式(也可以是内部链接)</span><br><span class="line">锚点链接</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#id&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span> href后面加#号和标签id</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">background-attachment:固定</span><br><span class="line">                     scroll:图片随滚动条滚动而上下移动</span><br><span class="line">                        fixed:图片固定在元素中不会随滚动条移动</span><br></pre></td></tr></table></figure>
<h2 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">table 表格</span><br><span class="line">th 代表表头突出重要性</span><br><span class="line">tr 代表行 td 代表列</span><br><span class="line">     <span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">&quot;1&quot;</span> <span class="attr">cellspacing</span>=<span class="string">&quot;0&quot;</span> <span class="attr">cellpanding</span>=<span class="string">&quot;50&quot;</span> <span class="attr">align</span>=<span class="string">&quot;center&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">th</span>&gt;</span>排名<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">th</span>&gt;</span>关键词<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">th</span>&gt;</span>趋势<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">th</span>&gt;</span>今日搜索<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">th</span>&gt;</span>最近七日<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">th</span>&gt;</span>相关链接<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">合并单元格</span><br><span class="line">rowspan=&quot;合并单元格数目&quot; <span class="comment">&lt;!--跨行--&gt;</span></span><br><span class="line">colspan=&quot;&quot;              <span class="comment">&lt;!--跨列--&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--无序列表 注：列表只能放li但是li里面可以任意放标签--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--有序列表--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--自定义列表 有父标题--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span>&gt;</span><span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span><span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span><span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">    表单域</span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">type</span>=<span class="string">&quot;reset&quot;</span> <span class="attr">checked</span> <span class="attr">maxlength</span> <span class="attr">value</span>=<span class="string">&quot;&quot;</span> &gt;</span> </span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">checked 代表默认选择框 maxlength 代表最长输入长度 value改变框内的值</span><br><span class="line"><span class="tag">&lt;<span class="name">h4</span>&gt;</span>普通按钮<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span>&gt;</span> </span><br><span class="line"><span class="comment">&lt;!--如果radio想要单选必须要有相同的name--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">id</span>=<span class="string">&quot;nv&quot;</span> <span class="attr">name</span>=<span class="string">&quot;1&quot;</span> <span class="attr">checked</span>&gt;</span><span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;nv&quot;</span>&gt;</span>女<span class="tag">&lt;/<span class="name">label</span>&gt;</span>  label的使用</span><br><span class="line"><span class="tag">&lt;<span class="name">select</span>&gt;</span><span class="tag">&lt;/<span class="name">select</span>&gt;</span>  下拉标签 selected 代表默认选择</span><br><span class="line"><span class="tag">&lt;<span class="name">textArea</span> <span class="attr">row</span>=<span class="string">&quot;&quot;</span> <span class="attr">col</span>=<span class="string">&quot;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textArea</span>&gt;</span></span><br><span class="line">演示</span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">        账号:<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">value</span>=<span class="string">&quot;请输入用户名&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span> 密码:</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span> 性别： 男</span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;1&quot;</span>&gt;</span> 女<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">name</span>=<span class="string">&quot;1&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span> 爱好: 吃饭<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>&gt;</span> 睡觉<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220423171354941.png" alt="image-20220423171354941"></p>
<ol>
<li>| 值         | 描述                                                         |<br>| ————— | —————————————————————————————— |<br>| alternate  | 链接到该文档的替代版本（比如打印页、翻译或镜像）。           |<br>| author     | 链接到该文档的作者。                                         |<br>| help       | 链接到帮助文档。                                             |<br>| icon       | 导入表示该文档的图标。                                       |<br>| license    | 链接到该文档的版权信息。                                     |<br>| next       | 表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档。 |<br>| prefetch   | 规定应该对目标资源进行缓存。                                 |<br>| prev       | 表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档。 |<br>| search     | 链接到针对文档的搜索工具。                                   |<br>| stylesheet | 要导入的样式表的 URL。                                       |</li>
</ol>
<h3 id="表单验证"><a href="#表单验证" class="headerlink" title="表单验证"></a>表单验证</h3><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_52736131/article/details/123632492?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167901608616800184137252%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&amp;request_id=167901608616800184137252&amp;biz_id=0&amp;utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-123632492-null-null.142^v74^control,201^v4^add_ask,239^v2^insert_chatgpt&amp;utm_term=js%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F&amp;spm=1018.2226.3001.4187">正则表达式</a>   </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!<span class="variable constant_">DOCTYPE</span> html&gt;</span><br><span class="line">&lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span><br><span class="line">    &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">    &lt;form action=&quot;#&quot; method=&quot;get&quot;&gt;</span><br><span class="line">        &lt;input type=&quot;text&quot; placeholder=&quot;用户名&quot; id=&quot;name&quot; required minlength=&quot;4&quot;&gt;&lt;br&gt; // 验证规则可以使用正则表达式</span><br><span class="line">        &lt;input type=&quot;password&quot; placeholder=&quot;密码&quot; id=&quot;pwd&quot; required minlength=&quot;5&quot;&gt;</span><br><span class="line">        &lt;input type=&quot;number&quot; min=&quot;1&quot; max=&quot;10&quot;&gt;</span><br><span class="line">        &lt;input type=&quot;submit&quot;&gt;</span><br><span class="line">    &lt;/form&gt;&lt;p id=&quot;log&quot;&gt;&lt;/p&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line"></span><br><span class="line">        let log = document.getElementById(&#x27;log&#x27;) //获取绑定的p标签属性</span><br><span class="line"></span><br><span class="line">        let input = document.querySelector(&#x27;input&#x27;) // 获取所以的p标签</span><br><span class="line">        input.addEventListener(&#x27;invalid&#x27;, logValue)  // 添加监听</span><br><span class="line"></span><br><span class="line">       function logValue(e)&#123;   // 将错误信息输出出来</span><br><span class="line">         log.textContent += e.target.value</span><br><span class="line">       &#125;</span><br><span class="line"></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><h2 id="常用css样式"><a href="#常用css样式" class="headerlink" title="常用css样式"></a>常用css样式</h2><div class="table-container">
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>user-select：none;</td>
<td>设置页面不能被选中</td>
</tr>
<tr>
<td>transform： ；</td>
<td>一些改变的格式设置</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h3 id="class"><a href="#class" class="headerlink" title="class"></a>class</h3><p>一个元素可以有多个class中间用空格分开 使用<strong>“.”调用</strong></p>
<h3 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h3><p>使用<strong>“#”调用</strong>  id选择器只能调用一次是唯一的</p>
<p>*号为通配符选择器统一修改</p>
<h2 id="front"><a href="#front" class="headerlink" title="front"></a>front</h2><p>font-family     修改文字样式</p>
<p>font-size         修改字体大小</p>
<p>font-weight    修改字体粗细</p>
<pre><code>        1. bold加粗文字
        2. number 一个数字加粗（更提倡用数字）
        3. normal 变成普通字体
</code></pre><p>font-style      修改字体样式          </p>
<p>italic 字体倾斜</p>
<p><strong>font复合样式</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">font:font-style font-weight font-size font-family</span><br><span class="line"> /* font-family: &#x27;Microsoft yahei&#x27;;</span><br><span class="line">            font-size: 16px;</span><br><span class="line">            font-weight: bold; */</span><br><span class="line">            font: italic bold 16px &#x27;Microsoft yahei&#x27;;</span><br></pre></td></tr></table></figure>
<h2 id="文本样式"><a href="#文本样式" class="headerlink" title="文本样式"></a>文本样式</h2><p>text-align  文本对齐</p>
<p>text-decoration  装饰文本</p>
<pre><code>    1. underline  下划线
    2. line-through  删除线
    3. none           空样式
</code></pre><p>text-indent   文本缩进 ==em单位代表当前文字的大小== </p>
<p>line-height     行间距大小  是由上间距 文字大小 和下间距共同构成的</p>
<h2 id="emmt语法"><a href="#emmt语法" class="headerlink" title="emmt语法"></a>emmt语法</h2><p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220424171904706.png" alt="image-20220424171904706"></p>
<h2 id="复合选择器"><a href="#复合选择器" class="headerlink" title="复合选择器"></a>复合选择器</h2><p><strong>后代选择器</strong></p>
<p>  元素1 元素2{    } 元素1和元素2用空格隔开元素可以为多个但是必须都是子类</p>
<p><strong>子选择器</strong></p>
<p>   只对亲儿子起作用使用&gt;分割</p>
<p>元素1&gt;元素2{ }</p>
<p><strong>并集选择器</strong></p>
<p>使用，分割</p>
<ul>
<li><code>father&gt;child：nth-child(n+12)</code>选择第12个之后的所有元素</li>
<li><code>father&gt;child:nth-child(-n+12)</code>选择倒数第12个元素</li>
<li><code>father&gt;child:nth-child(n+6):nth-child(-n+9)</code> 选择第6个到第9个选择器</li>
</ul>
<p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220425154955235.png" alt="image-20220425154955235"></p>
<p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220425161015049.png" alt="image-20220425161015049"></p>
<p>==语法==</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">后代</span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">ol</span> <span class="selector-tag">li</span> <span class="selector-tag">a</span>&#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">color</span>: pink;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">子选择</span><br><span class="line"> <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">ol</span>&gt;<span class="selector-tag">a</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">color</span>: pink;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css"> </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">并集选择</span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">ol</span>,<span class="selector-tag">a</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">color</span>: pink;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="块级元素"><a href="#块级元素" class="headerlink" title="块级元素"></a>块级元素</h2><p>块级元素独占一行可以设置大小</p>
<p><strong>行内元素</strong></p>
<p>特点：</p>
<pre><code>1. 在一行上可以显示多个
   2. 高宽设置是无效的
   3. 默认宽度就是内容本身的宽度
   4. 行内元素只能容纳行内元素
</code></pre><p><strong>注：</strong></p>
<p>a里面可以放块级元素但是给a转化一下块级模式更安全</p>
<p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220425162857046.png" alt="image-20220425162857046"></p>
<h2 id="转换"><a href="#转换" class="headerlink" title="转换"></a>转换</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">display: block; 转化为块级元素</span><br><span class="line">display: inline; 转化为行内元素</span><br><span class="line">display: inline-block; 转化为行内块元素</span><br></pre></td></tr></table></figure>
<p><strong>垂直居中</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">line-height=块级元素height</span><br></pre></td></tr></table></figure>
<h2 id="background"><a href="#background" class="headerlink" title="background"></a>background</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">background-color： ； 指定背景颜色 rpg  #16进制  英文单词</span><br><span class="line"></span><br><span class="line">background-image: none|url()  注意背景图片是url </span><br><span class="line"></span><br><span class="line">background-repeat: repeat-x 在x轴上平铺 non-repeat 取消平铺</span><br><span class="line"></span><br><span class="line">background-position:x y; 可以是px 百分号 英文单词 y不写为居中</span><br><span class="line"></span><br><span class="line">background-attachment:scroll| fixed; 滚动和固定</span><br><span class="line"></span><br><span class="line">background-size: ;  指定文件大小</span><br><span class="line"></span><br><span class="line">background: rpg(0,0,0,.3) 设置背景图片透明度</span><br></pre></td></tr></table></figure>
<h2 id="css-继承"><a href="#css-继承" class="headerlink" title="css 继承"></a>css 继承</h2><p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220426221534279.png" alt="image-20220426221534279"></p>
<h2 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h2><p>border 边框大小</p>
<p>padding 内容与边框的大小</p>
<p>content 文本</p>
<p>margin  块与块之间的距离</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">border  border-width border-style border-color</span><br><span class="line">border-style  solid 实线    dashed 虚线</span><br><span class="line">border-color </span><br><span class="line">border-collspace  合并相邻单元格</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">panding  margin  都可以指定上下左右间距</span><br><span class="line">盒子居中 有宽且左右边距为auto</span><br><span class="line">div&#123;</span><br><span class="line">   weight：;</span><br><span class="line">   margin:0 auto;  </span><br><span class="line">&#125;</span><br><span class="line">行内元素居中 </span><br><span class="line">在父盒子那里加入 text-alight：center;</span><br></pre></td></tr></table></figure>
<h3 id="嵌套外边框塌陷"><a href="#嵌套外边框塌陷" class="headerlink" title="嵌套外边框塌陷"></a>嵌套外边框塌陷</h3><p><strong>解决方法</strong></p>
<p>1.给父盒子一个边框 border：1px soil color；</p>
<ol>
<li>定义上边距 padding：；</li>
<li>为父元素添加 overflow：hidden；</li>
</ol>
<h3 id="清除内外边距"><a href="#清除内外边距" class="headerlink" title="清除内外边距"></a>清除内外边距</h3><figure class="highlight http"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">*&#123;</span><br><span class="line">  padding:0px;</span><br><span class="line">  margin:0px;</span><br><span class="line">&#125;</span><br><span class="line">list-style：none； 清除小圆点</span><br></pre></td></tr></table></figure>
<h3 id="圆角"><a href="#圆角" class="headerlink" title="圆角"></a>圆角</h3><p>border-radius：10px;  px可以随便改</p>
<h3 id="阴影"><a href="#阴影" class="headerlink" title="阴影"></a>阴影</h3><p>box-shadow: 水平位置 垂直位置 模糊距离 阴影尺寸 颜色 insert（内外部阴影）</p>
<h3 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h3><p>float： left  right；</p>
<p><strong>浮动只会盖住后面的盒子对前面的盒子不会照成影响</strong></p>
<p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220508153824297.png" alt="image-20220508153824297"></p>
<p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220508171052992.png" alt="image-20220508171052992"></p>
<h3 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h3><p><img src="C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20220508194223030.png" alt="image-20220508194223030"></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">1.额外标签法</span><br><span class="line">.clear&#123;</span><br><span class="line">	clear: both;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;flaot&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;clear&quot;</span>&gt;</span></span><br><span class="line">    对clear元素进行消除浮动即可清除上面盒子的浮动</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">2.清除浮动</span><br><span class="line">给父div添加语句 overflow：hidden； 也可以清除子元素浮动</span><br></pre></td></tr></table></figure>
<h2 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h2><p>==子绝父相==</p>
<p>选择器{position：static；}</p>
<p>静态定位：</p>
<p>静态定位按照标准流特性摆放位置,他没有边偏移 很少使用</p>
<p>相对定位：</p>
<p>选择器{position：relative；}</p>
<p>相对定位元素在移动位置时相对于原来的位置</p>
<p>并且==位置保留==不会像浮动一样飞起来</p>
<p>绝对定位（不占有位置）</p>
<p>选择器{position：absolute；}</p>
<p>绝对定位（不占有位置）</p>
<p>如果没有父元素且父元素没有被定位则以浏览器进行对准</p>
<p>以==最近的有定位的==元素为基准</p>
<p>固定定位</p>
<p>选择器{position：fixed；}</p>
<p>浏览器滚动时元素位置不会发生改变参照浏览器的可视窗口进行移动与父元素有没有定位没有关系</p>
<p>不保留位置</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">固定到版心的右侧</span><br><span class="line">选择器&#123;</span><br><span class="line">         1.到网页的一半</span><br><span class="line">         left: 50%;</span><br><span class="line">         2.版心的一半</span><br><span class="line">         margin：50%px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>粘性定位</p>
<p>选择器{position：sticky；top：10px；}</p>
<p>1.以浏览器的可视窗口为参照点移动</p>
<p>2.占有原位置</p>
<p>3.必须添加top button left right一个元素才有效</p>
<h4 id="z-index-1"><a href="#z-index-1" class="headerlink" title="z-index: 1;"></a>z-index: 1;</h4><p>控制盒子的叠放的显示顺序</p>
<p>数值越大盒子越靠上</p>
<p>脱标的盒子不会除法外边框塌陷</p>
<h2 id="浮动和定位的特点"><a href="#浮动和定位的特点" class="headerlink" title="浮动和定位的特点"></a>浮动和定位的特点</h2><p>浮动不会压着文字而定位会</p>
<h2 id="元素的显示与隐藏"><a href="#元素的显示与隐藏" class="headerlink" title="元素的显示与隐藏"></a>元素的显示与隐藏</h2><p><strong>display</strong></p>
<p>display：none; 隐藏对象   隐藏后不占有原位置</p>
<p>display：block；显示元素</p>
<p><strong>visiblility</strong></p>
<p>visibility：visible； 元素可视</p>
<p>visibility：hidden；元素隐藏位置保留</p>
<p><strong>overflow</strong></p>
<p>overflow:hidden 溢出部分隐藏</p>
<p>overflow：scroll 添加滚动条</p>
<p>overflow：auto 溢出了显示滚动条不溢出不显示</p>
<h2 id="精灵图"><a href="#精灵图" class="headerlink" title="精灵图"></a>精灵图</h2><p>减少服务器接收请求的数目</p>
<h1 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h1><p>prompt(‘’)  输入框</p>
<p>alter(‘’)  警示框</p>
<p>console.log(‘’) 控制台输出 给程序员看的</p>
<p>js是弱类型语言只有等号值确定了类型才确定 并且类型是可以变化的</p>
<h3 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">定义</span><br><span class="line"><span class="keyword">let</span> s = <span class="string">&quot;acwing&quot;</span>, x = <span class="number">5</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;yxc&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d[<span class="string">&#x27;name&#x27;</span>]+d[<span class="string">&#x27;age&#x27;</span>]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(d.<span class="property">name</span>+d.<span class="property">age</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//遍历一个let</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> key <span class="keyword">in</span> d) d[key];</span><br></pre></td></tr></table></figure>
<p><strong>变量类型</strong></p>
<blockquote>
<p><code>number</code>：数值变量，例如1, 2.5<br>        <code>string</code>：字符串，例如”acwing”, ‘yxc’，单引号与双引号均可。字符串中的每个字符为只读类型。<br>        <code>boolean</code>：布尔值，例如true, false<br>        <code>object</code>：对象，类似于C++中的指针，例如[1, 2, 3]，{name: “yxc”, age: 18}，null<br>        <code>undefined</code>：未定义的变量<br>类似于Python，JavaScript中的变量类型可以动态变化。</p>
</blockquote>
<p><strong>运算符</strong><br>       与C++、Python、Java类似，不同点：</p>
<p><code>**</code>表示乘方<br>       等于与不等于用<code>===</code>和<code>!==</code></p>
<p><strong>isNaN</strong>  判断里面的值是否为数字 是数字返回false</p>
<p><strong>typeof </strong>检测变量是什么类型</p>
<h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><p><strong>string为只读变量不可以看成char[]</strong></p>
<ul>
<li><p>var.toString()</p>
</li>
<li><p>String(var)；</p>
</li>
<li><p>var=‘’+var；</p>
</li>
</ul>
<p>其他类型转换为数字型</p>
<ul>
<li><p>parseInt() ; parseFloat();</p>
</li>
<li><p>number();</p>
</li>
</ul>
<p>其他类型转化为布尔类型</p>
<ul>
<li>Boolean();</li>
</ul>
<h3 id="调用"><a href="#调用" class="headerlink" title="调用"></a>调用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">使用import可以调用多个js文件</span><br><span class="line">let name = &quot;acwing&quot;;</span><br><span class="line"></span><br><span class="line">function print() &#123;</span><br><span class="line">    console.log(&quot;Hello World!&quot;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export &#123;  //使得别的文件可以调用</span><br><span class="line">    name,</span><br><span class="line">    print</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>中的内容为：</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="keyword">import</span> &#123; name, print &#125; <span class="keyword">from</span> <span class="string">&quot;/static/js/index.js&quot;</span>;</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">    <span class="variable language_">console</span>.<span class="title function_">log</span>(name);</span></span><br><span class="line"><span class="language-javascript">    <span class="title function_">print</span>();</span></span><br><span class="line"><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p><strong>添加点击事件</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> input = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;textArea&#x27;</span>);  <span class="comment">//获取对象</span></span><br><span class="line"><span class="keyword">let</span> run = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.run&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> output = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;pre&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">main</span>(<span class="params"></span>) &#123;</span><br><span class="line">    run.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;  <span class="comment">//添加点击事件</span></span><br><span class="line">        <span class="keyword">let</span> s = input.<span class="property">value</span>;</span><br><span class="line">        output.<span class="property">innerHTML</span> = s;</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> &#123;</span><br><span class="line">    main</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>字符串中填入数值 ${表达式}​</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">et name = <span class="string">&#x27;yxc&#x27;</span>, age = <span class="number">18</span>;</span><br><span class="line"><span class="keyword">let</span> s = <span class="string">`My name is <span class="subst">$&#123;name&#125;</span>, I&#x27;m <span class="subst">$&#123;age&#125;</span> years old.`</span>;</span><br></pre></td></tr></table></figure>
<p>num = num.toFixed(2)  保留小数</p>
<p><code>map()</code>方法定义在JavaScript的<code>Array</code>中，它返回一个新的数组，新返回数组中的每个元素为原始数组的每一个元素分别调用map中的<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=回调函数&amp;spm=1001.2101.3001.7020">回调函数</a>处理后的值。</p>
<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;yxc&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span>,</span><br><span class="line">    <span class="attr">money</span>: <span class="number">0</span>,</span><br><span class="line">    <span class="attr">add_money</span>: <span class="keyword">function</span> (<span class="params">x</span>) &#123;  <span class="comment">//定义方法</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">money</span> += x;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="attr">d</span>:&#123;   <span class="comment">//定义第二个类</span></span><br><span class="line">    </span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>调用</strong></p>
<ul>
<li><code>person.name</code>、<code>person.add_money()</code></li>
<li><code>person[&quot;name&quot;]</code>、<code>person[&quot;add_money&quot;]()</code></li>
</ul>
<h3 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">add</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//函数的变量名可以睡意更改</span></span><br><span class="line"><span class="keyword">let</span> add = <span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a + b;</span><br><span class="line">&#125;</span><br><span class="line">可以用（）=&gt;代替<span class="keyword">function</span></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">add</span> = (<span class="params">a, b</span>) =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> a + b;</span><br></pre></td></tr></table></figure>
<p>如果未定义返回值，则返回<code>undefined</code>。</p>
<h3 id="类"><a href="#类" class="headerlink" title="类"></a>类</h3><p><strong>类调方法一定要带括号</strong><code>()</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Point</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">x, y</span>) &#123;  <span class="comment">// 构造函数</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">x</span> = x;  <span class="comment">// 成员变量</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">y</span> = y;</span><br><span class="line"></span><br><span class="line">        <span class="variable language_">this</span>.<span class="title function_">init</span>();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="title function_">init</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">sum</span> = <span class="variable language_">this</span>.<span class="property">x</span> + <span class="variable language_">this</span>.<span class="property">y</span>;  <span class="comment">// 成员变量可以在任意的成员函数中定义</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="title function_">toString</span>(<span class="params"></span>) &#123;  <span class="comment">// 成员函数</span></span><br><span class="line">        <span class="keyword">return</span> <span class="string">&#x27;(&#x27;</span> + <span class="variable language_">this</span>.<span class="property">x</span> + <span class="string">&#x27;, &#x27;</span> + <span class="variable language_">this</span>.<span class="property">y</span> + <span class="string">&#x27;)&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//类的调用</span></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> <span class="title class_">Point</span>(<span class="number">3</span>, <span class="number">4</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(p.<span class="title function_">toString</span>());</span><br><span class="line"></span><br><span class="line">继承</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">ColorPoint</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Point</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">x, y, color</span>) &#123;</span><br><span class="line">        <span class="variable language_">super</span>(x, y); <span class="comment">// 这里的super表示父类的构造函数</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">color</span> = color; <span class="comment">//this一定要写到super之后不然会报错</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="comment">//构造函数之外调用super相当于调用父类的实例</span></span><br><span class="line">    <span class="title function_">toString</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">color</span> + <span class="string">&#x27; &#x27;</span> + <span class="variable language_">super</span>.<span class="title function_">toString</span>(); <span class="comment">// 调用父类的toString()</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">static</span> <span class="title function_">fac</span>(<span class="params"></span>)&#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//静态调用要用类名调用</span></span><br><span class="line"><span class="title class_">ColorPoint</span>.<span class="title function_">fac</span>()</span><br></pre></td></tr></table></figure>
<h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><h4 id="鼠标"><a href="#鼠标" class="headerlink" title="鼠标"></a>鼠标</h4><ul>
<li><p><code>click</code>：鼠标左键点击</p>
</li>
<li><p><code>dblclick</code>：鼠标左键双击</p>
</li>
<li><p><code>contextmenu</code>：鼠标右键点击</p>
</li>
<li><p><code>mousedown</code>：鼠标按下，包括左键、滚轮、右键</p>
</li>
<li><p><code>event</code>.button：0表示左键，1表示中键，2表示右键</p>
</li>
<li><p><code>mouseup</code>：鼠标弹起，包括左键、滚轮、右键</p>
</li>
</ul>
<h4 id="键盘"><a href="#键盘" class="headerlink" title="键盘"></a>键盘</h4><ul>
<li><code>keydown</code>：某个键是否被按住，事件会连续触发</li>
<li><code>event.code</code>：返回按的是哪个键</li>
<li><code>event.altKey、event.ctrlKey、event.shiftKey</code>分别表示是否同时按下了<code>alt、ctrl、shift</code>键。</li>
<li><code>keyup</code>：某个按键是否被释放</li>
<li><code>event</code>常用属性同上</li>
<li><code>keypress</code>：紧跟在<code>keydown</code>事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。</li>
<li><code>event</code>常用属性同上</li>
<li><code>keydown、keyup、keypress</code>的关系类似于鼠标的<code>mousedown、mouseup、click</code></li>
</ul>
<h4 id="表单-1"><a href="#表单-1" class="headerlink" title="表单"></a>表单</h4><ul>
<li><p><code>focus</code>：聚焦某个元素</p>
</li>
<li><p><code>blur</code>：取消聚焦某个元素</p>
</li>
<li><p><code>change</code>：某个元素的内容发生了改变</p>
<h4 id="窗口"><a href="#窗口" class="headerlink" title="窗口"></a>窗口</h4><p>需要作用到window元素上。</p>
</li>
<li><p><code>resize</code>：当窗口大小放生变化</p>
</li>
<li><p><code>scroll</code>：滚动指定的元素</p>
</li>
<li><p><code>load</code>：当元素被加载完成</p>
</li>
</ul>
<h3 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h3><ul>
<li><p><code>[a,b,c]</code>:查找中括号内出现的字符</p>
</li>
<li><p><code>[^(a,b,c)]</code>:查找非括号内的内容</p>
</li>
<li><code>[a-z]</code>:查找所有小写字母</li>
</ul>
<h2 id="jQuery"><a href="#jQuery" class="headerlink" title="jQuery"></a>jQuery</h2><h4 id="JQ与DOM元素的转化"><a href="#JQ与DOM元素的转化" class="headerlink" title="JQ与DOM元素的转化"></a>JQ与DOM元素的转化</h4><p><code>$&#123;&#39;video&#39;&#125;</code> 将Dom对象转化为jQuery对象</p>
<p><code>$&#123;video&#125;[index]</code> <code>$&#123;video&#125;.get(index)</code> 将jQuery转化为Dom对象    </p>
<p><code>e.stopPropagation()</code>：阻止事件向上传递<br>        <code>e.preventDefault()</code>：阻止事件的默认行为</p>
<h4 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h4><p><code>A.animate(prop,dely)</code>:其中prop是一定要存在的使用大括号设置属性</p>
<p><code>A.stop()</code>:停止动画</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">&#x27;div&#x27;</span>).animate(&#123;</span><br><span class="line">            height:<span class="string">&#x27;+=50&#x27;</span>,</span><br><span class="line">            width:<span class="string">&#x27;100px&#x27;</span></span><br><span class="line">        &#125;,<span class="number">3000</span>);</span><br></pre></td></tr></table></figure>
<h4 id="元素的隐藏与展现"><a href="#元素的隐藏与展现" class="headerlink" title="元素的隐藏与展现"></a><strong>元素的隐藏与展现</strong></h4><p><code>A.fadeOut()</code>：慢慢消失，可以添加参数，表示消失时间<br>        <code>A.fadeIn()</code>：慢慢出现，可以添加参数，表示出现时间</p>
<p><code>A.slideUp</code>:向上展现</p>
<p><code>A.slideDown</code>:向下展现</p>
<h4 id="元素的添加与删除"><a href="#元素的添加与删除" class="headerlink" title="元素的添加与删除"></a>元素的添加与删除</h4><p><code>$(&#39;&lt;div class=&quot;mydiv&quot;&gt;&lt;span&gt;Hello World&lt;/span&gt;&lt;/div&gt;&#39;)</code>：构造一个jQuery对象<br>        <code>$A.append($B)</code>：将B添加到A的末尾<br>        <code>A.prepend($B)</code>：将$B添加到$A的开头<br>        <code>A.remove()</code>：删除元素A<br>        <code>A.empty()</code>：清空元素A的所有儿子</p>
<h4 id="对类名的操作"><a href="#对类名的操作" class="headerlink" title="对类名的操作"></a><strong>对类名的操作</strong></h4><ul>
<li><p><code>$A.addClass(class_name)</code>：添加某个类</p>
</li>
<li><p><code>$A.removeClass(class_name)</code>：删除某个类</p>
</li>
<li><p><code>$A.hasClass(class_name)</code>：判断某个类是否存在</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; <span class="number">5</span>; i++) &#123;</span><br><span class="line">            <span class="keyword">let</span> $a = $(<span class="string">`&lt;a class=&quot;box<span class="subst">$&#123;i&#125;</span>&quot; href=&quot;https://www.acwing.com/activity/content/1150/&quot;&gt;acwing<span class="subst">$&#123;i&#125;</span>&lt;/a&gt;`</span>);</span><br><span class="line">            $div.<span class="title function_">append</span>($a);</span><br><span class="line">&#125;</span><br><span class="line">对元素动态添加</span><br></pre></td></tr></table></figure>
<h4 id="尺寸"><a href="#尺寸" class="headerlink" title="尺寸"></a>尺寸</h4><div class="table-container">
<table>
<thead>
<tr>
<th>方法</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>求内部盒子的宽度</td>
</tr>
<tr>
<td>innerWidth</td>
<td>求内部的宽度（不加当前盒子的边框）</td>
</tr>
<tr>
<td>outerWidth</td>
<td>求内部加边框的宽度</td>
</tr>
<tr>
<td>outerWidth(true)</td>
<td>求外部盒子的宽度</td>
</tr>
</tbody>
</table>
</div>
<h4 id="循环"><a href="#循环" class="headerlink" title="循环"></a>循环</h4><ul>
<li><code>for-in</code>循环，可以枚举数组中的下标，以及对象中的key</li>
<li><code>for-of</code>循环，可以枚举数组中的值，以及对象中的value</li>
</ul>
<h4 id="对HTML内容、文本的操作"><a href="#对HTML内容、文本的操作" class="headerlink" title="对HTML内容、文本的操作"></a>对HTML内容、文本的操作</h4><ul>
<li><code>$A.html()</code>：获取、修改HTML内容</li>
<li><code>$A.text()</code>：获取、修改文本信息</li>
<li><code>$A.val()</code>：获取、修改文本的值</li>
</ul>
<h4 id="查找"><a href="#查找" class="headerlink" title="查找"></a>查找</h4><ul>
<li><p><code>$(selector).parent(filter)</code>：查找父元素</p>
</li>
<li><p><code>$(selector).parents(filter)</code>：查找所有祖先元素</p>
</li>
<li><p><code>$(selector).children(filter)</code>：在所有子元素中查找</p>
</li>
<li><p><code>$(selector).find(filter)</code>：在所有后代元素中查找</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> $div3=$(<span class="string">&#x27;.div3&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>($div3.<span class="title function_">parent</span>(<span class="string">&#x27;.div2&#x27;</span>));</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h4><ul>
<li><code>.push()</code>添加一个元素</li>
<li><code>.splice(star,num)</code> 从star位置开始向后哦删除num个元素</li>
</ul>
<h4 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h4><p><strong>GET</strong>方法：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">ajax</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: url,</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;GET&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">dataType</span>: <span class="string">&quot;json&quot;</span>,</span><br><span class="line">    <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">resp</span>) &#123;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p><strong>POST</strong>方法：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">$.<span class="title function_">ajax</span>(&#123;</span><br><span class="line">    <span class="attr">url</span>: url,</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;POST&quot;</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">dataType</span>: <span class="string">&quot;json&quot;</span>,</span><br><span class="line">    <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">resp</span>) &#123;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="setTimeout与setInterval"><a href="#setTimeout与setInterval" class="headerlink" title="setTimeout与setInterval"></a>setTimeout与setInterval</h3><p><code>setTimeout(func(),dely)</code> func函数dely延时只执行一次</p>
<p><code>setinterval()</code> 重复执行</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timer = <span class="built_in">setInterval</span>(<span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">            $div3.<span class="title function_">append</span>(<span class="string">&#x27;hhhhh&#x27;</span>);</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hhhhh&#x27;</span>);</span><br><span class="line">        &#125;, <span class="number">2000</span>)</span><br><span class="line"></span><br><span class="line">et interval_id = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;Hello World!&quot;</span>)</span><br><span class="line">&#125;, <span class="number">2000</span>);  <span class="comment">// 每隔2秒，输出一次&quot;Hello World&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">clearTimeout</span>(interval_id);  <span class="comment">// 清除周期执行的函数</span></span><br></pre></td></tr></table></figure>
<p><code>clearTimeout(name)</code> 括号里面跟要停止的计时器</p>
<h3 id="requestAnimationFrame-func"><a href="#requestAnimationFrame-func" class="headerlink" title="requestAnimationFrame(func)"></a>requestAnimationFrame(func)</h3><p>该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title class_">AniName</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="title function_">DivAddWidth</span> = (<span class="params"></span>) =&gt; &#123; </span><br><span class="line">            $(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">width</span>($(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">width</span>() + <span class="number">1</span>);</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>($(<span class="string">&#x27;div&#x27;</span>).<span class="title function_">width</span>());      <span class="comment">//width（）是个函数要加（）</span></span><br><span class="line">           <span class="title class_">AniName</span>= <span class="title function_">requestAnimationFrame</span>(<span class="title class_">DivAddWidth</span>);</span><br><span class="line">        &#125;</span><br><span class="line">       <span class="title class_">AniName</span>= <span class="title function_">requestAnimationFrame</span>(<span class="title class_">DivAddWidth</span>);</span><br><span class="line"><span class="title function_">cancelAnimationFrame</span>(<span class="title class_">AniName</span>); <span class="comment">//停止reque</span></span><br></pre></td></tr></table></figure>
<h3 id="Map与Set"><a href="#Map与Set" class="headerlink" title="Map与Set"></a>Map与Set</h3><p><strong>Map常用API：</strong></p>
<ul>
<li><code>set(key, value)</code>：插入键值对，如果key已存在，则会覆盖原有的value</li>
<li><code>get(key)</code>：查找关键字，如果不存在，返回undefined</li>
<li><code>size</code>：返回键值对数量</li>
<li><code>has(key)</code>：返回是否包含关键字key</li>
<li><code>delete(key)</code>：删除关键字key</li>
<li><code>clear()</code>：删除所有元素</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">遍历操作  <span class="keyword">of</span>返回的是一个块</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">let</span> [key, value] <span class="keyword">of</span> map) &#123; </span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(key, value);</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<p><strong>Set常用API</strong></p>
<ul>
<li><code>add()</code>：添加元素</li>
<li><code>has()</code>：返回是否包含某个元素</li>
<li><code>size</code>：返回元素数量</li>
<li><code>delete()</code>：删除某个元素</li>
<li><code>clear()</code>：删除所有元素</li>
</ul>
<h3 id="localstorage"><a href="#localstorage" class="headerlink" title="localstorage"></a>localstorage</h3><p>可以在用户的浏览器上存储键值对。</p>
<ul>
<li><code>setItem(key, value)</code>：插入</li>
<li><code>getItem(key)</code>：查找</li>
<li><code>removeItem(key)</code>：删除</li>
<li><code>clear()</code>：清空</li>
</ul>
<h3 id="json"><a href="#json" class="headerlink" title="json"></a><strong>json</strong></h3><p> <strong>对象和字符串之间的转换</strong></p>
<ul>
<li><code>JSON.parse()</code>：将字符串解析成对象</li>
<li><code>JSON.stringify()</code>：将对象转化为字符串</li>
</ul>
<h3 id="日期"><a href="#日期" class="headerlink" title="日期"></a>日期</h3><ul>
<li><code>Date.now()</code>：返回现在时刻。</li>
<li><code>Date.parse(&quot;2022-04-15T15:30:00.000+08:00&quot;)</code>：返回北京时间2022年4月15日 15:30:00的时刻。</li>
<li>两个Date对象实例的差值为毫秒数 <strong>上面两个函数可以直接用类名调用</strong></li>
<li><code>getDay()</code>：返回星期，0表示星期日，1-6表示星期一至星期六</li>
<li><code>getDate()</code>：返回日，数值为1-31</li>
<li><code>getMonth()</code>：返回月，数值为0-11</li>
<li><code>getFullYear()</code>：返回年份</li>
<li><code>getHours()</code>：返回小时</li>
<li><code>getMinutes()</code>：返回分钟</li>
<li><code>getSeconds()</code>：返回秒</li>
<li><code>getMilliseconds()</code>：返回毫秒</li>
</ul>
<h3 id="WebSocket"><a href="#WebSocket" class="headerlink" title="WebSocket"></a>WebSocket</h3><p><strong>与服务器建立全双工连接。</strong></p>
<p>常用API：</p>
<ul>
<li><code>new WebSocket(&#39;ws://localhost:8080&#39;);</code>：建立ws连接。</li>
<li><code>send()</code>：向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串。</li>
<li><code>onopen</code>：类似于onclick，当连接建立时触发。</li>
<li><code>onmessage</code>：当从服务器端接收到消息时触发。</li>
<li><code>close()</code>：关闭连接。</li>
<li><code>onclose</code>：当连接关闭后触发。</li>
</ul>
<h3 id="covers"><a href="#covers" class="headerlink" title="covers"></a>covers</h3></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">心结说给影子听</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://gitee.com/keduoli123/zhaopubook/2023/02/17/HTML/">https://gitee.com/keduoli123/zhaopubook/2023/02/17/HTML/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://gitee.com/keduoli123/zhaopubook" target="_blank">学习笔记</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/zhaopubook/img/title5.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/zhaopubook/2023/02/17/%E5%8D%95%E8%AF%8D/"><img class="prev-cover" src="/zhaopubook/img/tuzi.jpg" onerror="onerror=null;src='/zhaopubook/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">英语背诵</div></div></a></div><div class="next-post pull-right"><a href="/zhaopubook/2023/02/14/%E7%BA%BF%E6%80%A7%E4%BB%A3%E6%95%B0/"><img class="next-cover" src="/zhaopubook/img/title2.jpg" onerror="onerror=null;src='/zhaopubook/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">线性代数笔记</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/zhaopubook/img/head.jpg" onerror="this.onerror=null;this.src='/zhaopubook/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">心结说给影子听</div><div class="author-info__description">考研人的心酸</div></div><div class="card-info-data is-center"><div class="card-info-data-item"><a href="/zhaopubook/archives/"><div class="headline">文章</div><div class="length-num">13</div></a></div><div class="card-info-data-item"><a href="/zhaopubook/tags/"><div class="headline">标签</div><div class="length-num">0</div></a></div><div class="card-info-data-item"><a href="/zhaopubook/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">考研加油</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E6%A0%87%E7%AD%BE"><span class="toc-number">1.</span> <span class="toc-text">基本标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC"><span class="toc-number">2.</span> <span class="toc-text">表格</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8"><span class="toc-number">2.1.</span> <span class="toc-text">列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95"><span class="toc-number">2.2.</span> <span class="toc-text">表单</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81"><span class="toc-number">2.3.</span> <span class="toc-text">表单验证</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS"><span class="toc-number"></span> <span class="toc-text">CSS</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8css%E6%A0%B7%E5%BC%8F"><span class="toc-number">1.</span> <span class="toc-text">常用css样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#class"><span class="toc-number">1.1.</span> <span class="toc-text">class</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.2.</span> <span class="toc-text">id选择器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#front"><span class="toc-number">2.</span> <span class="toc-text">front</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F"><span class="toc-number">3.</span> <span class="toc-text">文本样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#emmt%E8%AF%AD%E6%B3%95"><span class="toc-number">4.</span> <span class="toc-text">emmt语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">5.</span> <span class="toc-text">复合选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0"><span class="toc-number">6.</span> <span class="toc-text">块级元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BD%AC%E6%8D%A2"><span class="toc-number">7.</span> <span class="toc-text">转换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#background"><span class="toc-number">8.</span> <span class="toc-text">background</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#css-%E7%BB%A7%E6%89%BF"><span class="toc-number">9.</span> <span class="toc-text">css 继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="toc-number">10.</span> <span class="toc-text">盒子模型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97%E5%A4%96%E8%BE%B9%E6%A1%86%E5%A1%8C%E9%99%B7"><span class="toc-number">10.1.</span> <span class="toc-text">嵌套外边框塌陷</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E5%86%85%E5%A4%96%E8%BE%B9%E8%B7%9D"><span class="toc-number">10.2.</span> <span class="toc-text">清除内外边距</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9C%86%E8%A7%92"><span class="toc-number">10.3.</span> <span class="toc-text">圆角</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%B4%E5%BD%B1"><span class="toc-number">10.4.</span> <span class="toc-text">阴影</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8"><span class="toc-number">10.5.</span> <span class="toc-text">浮动</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">10.6.</span> <span class="toc-text">清除浮动</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D"><span class="toc-number">11.</span> <span class="toc-text">定位</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#z-index-1"><span class="toc-number">11.0.1.</span> <span class="toc-text">z-index: 1;</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8%E5%92%8C%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">12.</span> <span class="toc-text">浮动和定位的特点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8E%E9%9A%90%E8%97%8F"><span class="toc-number">13.</span> <span class="toc-text">元素的显示与隐藏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B2%BE%E7%81%B5%E5%9B%BE"><span class="toc-number">14.</span> <span class="toc-text">精灵图</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#JavaScript"><span class="toc-number"></span> <span class="toc-text">JavaScript</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%98%E9%87%8F"><span class="toc-number">0.1.</span> <span class="toc-text">变量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">0.2.</span> <span class="toc-text">字符串</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B0%83%E7%94%A8"><span class="toc-number">0.3.</span> <span class="toc-text">调用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1"><span class="toc-number">1.</span> <span class="toc-text">对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0"><span class="toc-number">1.1.</span> <span class="toc-text">函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB"><span class="toc-number">1.2.</span> <span class="toc-text">类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6"><span class="toc-number">1.3.</span> <span class="toc-text">事件</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87"><span class="toc-number">1.3.1.</span> <span class="toc-text">鼠标</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%94%AE%E7%9B%98"><span class="toc-number">1.3.2.</span> <span class="toc-text">键盘</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95-1"><span class="toc-number">1.3.3.</span> <span class="toc-text">表单</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%AA%97%E5%8F%A3"><span class="toc-number">1.3.4.</span> <span class="toc-text">窗口</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F"><span class="toc-number">1.4.</span> <span class="toc-text">正则表达式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jQuery"><span class="toc-number">2.</span> <span class="toc-text">jQuery</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#JQ%E4%B8%8EDOM%E5%85%83%E7%B4%A0%E7%9A%84%E8%BD%AC%E5%8C%96"><span class="toc-number">2.0.1.</span> <span class="toc-text">JQ与DOM元素的转化</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8A%A8%E7%94%BB"><span class="toc-number">2.0.2.</span> <span class="toc-text">动画</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E9%9A%90%E8%97%8F%E4%B8%8E%E5%B1%95%E7%8E%B0"><span class="toc-number">2.0.3.</span> <span class="toc-text">元素的隐藏与展现</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%BB%E5%8A%A0%E4%B8%8E%E5%88%A0%E9%99%A4"><span class="toc-number">2.0.4.</span> <span class="toc-text">元素的添加与删除</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%B9%E7%B1%BB%E5%90%8D%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-number">2.0.5.</span> <span class="toc-text">对类名的操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B0%BA%E5%AF%B8"><span class="toc-number">2.0.6.</span> <span class="toc-text">尺寸</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BE%AA%E7%8E%AF"><span class="toc-number">2.0.7.</span> <span class="toc-text">循环</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AF%B9HTML%E5%86%85%E5%AE%B9%E3%80%81%E6%96%87%E6%9C%AC%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-number">2.0.8.</span> <span class="toc-text">对HTML内容、文本的操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9F%A5%E6%89%BE"><span class="toc-number">2.0.9.</span> <span class="toc-text">查找</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%B0%E7%BB%84"><span class="toc-number">2.0.10.</span> <span class="toc-text">数组</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#ajax"><span class="toc-number">2.0.11.</span> <span class="toc-text">ajax</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#setTimeout%E4%B8%8EsetInterval"><span class="toc-number">2.1.</span> <span class="toc-text">setTimeout与setInterval</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#requestAnimationFrame-func"><span class="toc-number">2.2.</span> <span class="toc-text">requestAnimationFrame(func)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Map%E4%B8%8ESet"><span class="toc-number">2.3.</span> <span class="toc-text">Map与Set</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#localstorage"><span class="toc-number">2.4.</span> <span class="toc-text">localstorage</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#json"><span class="toc-number">2.5.</span> <span class="toc-text">json</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%A5%E6%9C%9F"><span class="toc-number">2.6.</span> <span class="toc-text">日期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#WebSocket"><span class="toc-number">2.7.</span> <span class="toc-text">WebSocket</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#covers"><span class="toc-number">2.8.</span> <span class="toc-text">covers</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/zhaopubook/2023/05/04/%E9%AB%98%E6%95%B0%E4%B8%80-%E5%BE%AE%E5%88%86%E6%96%B9%E7%A8%8B/" title="高数一 微分方程"><img src="/zhaopubook/img/title6.jpg" onerror="this.onerror=null;this.src='/zhaopubook/img/404.jpg'" alt="高数一 微分方程"/></a><div class="content"><a class="title" href="/zhaopubook/2023/05/04/%E9%AB%98%E6%95%B0%E4%B8%80-%E5%BE%AE%E5%88%86%E6%96%B9%E7%A8%8B/" title="高数一 微分方程">高数一 微分方程</a><time datetime="2023-05-04T13:49:16.406Z" title="发表于 2023-05-04 21:49:16">2023-05-04</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/zhaopubook/2023/04/29/%E9%AB%98%E6%95%B0%E4%B8%80-%E5%A4%9A%E5%85%83%E5%87%BD%E6%95%B0%E5%BE%AE%E5%88%86%E5%AD%A6/" title="高数一 多元函数微分学"><img src="/zhaopubook/img/jpg1.jpg" onerror="this.onerror=null;this.src='/zhaopubook/img/404.jpg'" alt="高数一 多元函数微分学"/></a><div class="content"><a class="title" href="/zhaopubook/2023/04/29/%E9%AB%98%E6%95%B0%E4%B8%80-%E5%A4%9A%E5%85%83%E5%87%BD%E6%95%B0%E5%BE%AE%E5%88%86%E5%AD%A6/" title="高数一 多元函数微分学">高数一 多元函数微分学</a><time datetime="2023-04-29T09:06:45.983Z" title="发表于 2023-04-29 17:06:45">2023-04-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/zhaopubook/2023/04/22/vue3%E5%8A%A0%E5%85%A5codemirror%E7%BC%96%E8%AF%91%E5%99%A8/" title="无题"><img src="/zhaopubook/img/title4.jpg" onerror="this.onerror=null;this.src='/zhaopubook/img/404.jpg'" alt="无题"/></a><div class="content"><a class="title" href="/zhaopubook/2023/04/22/vue3%E5%8A%A0%E5%85%A5codemirror%E7%BC%96%E8%AF%91%E5%99%A8/" title="无题">无题</a><time datetime="2023-04-22T01:39:03.723Z" title="发表于 2023-04-22 09:39:03">2023-04-22</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/zhaopubook/2023/04/05/%E9%AB%98%E6%95%B0%E4%B8%80-%E5%AE%9A%E7%A7%AF%E5%88%86/" title="高数一 定积分"><img src="/zhaopubook/img/title6.jpg" onerror="this.onerror=null;this.src='/zhaopubook/img/404.jpg'" alt="高数一 定积分"/></a><div class="content"><a class="title" href="/zhaopubook/2023/04/05/%E9%AB%98%E6%95%B0%E4%B8%80-%E5%AE%9A%E7%A7%AF%E5%88%86/" title="高数一 定积分">高数一 定积分</a><time datetime="2023-04-05T14:11:27.883Z" title="发表于 2023-04-05 22:11:27">2023-04-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/zhaopubook/2023/03/26/%E9%AB%98%E6%95%B0%E4%B8%80-%E4%B8%8D%E5%AE%9A%E7%A7%AF%E5%88%86/" title="高数一 不定积分"><img src="/zhaopubook/img/preview.jpg" onerror="this.onerror=null;this.src='/zhaopubook/img/404.jpg'" alt="高数一 不定积分"/></a><div class="content"><a class="title" href="/zhaopubook/2023/03/26/%E9%AB%98%E6%95%B0%E4%B8%80-%E4%B8%8D%E5%AE%9A%E7%A7%AF%E5%88%86/" title="高数一 不定积分">高数一 不定积分</a><time datetime="2023-03-26T13:52:06.721Z" title="发表于 2023-03-26 21:52:06">2023-03-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 心结说给影子听</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">本地搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/zhaopubook/js/utils.js"></script><script src="/zhaopubook/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script><script src="/zhaopubook/js/search/local-search.js"></script><div class="js-pjax"></div><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="false"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>